<template>
  <div class="baseContainer">
    <div style="padding-bottom:12px">
      <el-button class="miniBtn" size="mini" @click="goBack">返 回</el-button>
      <p style="display: inline-block; margin-left: 15px;font-size: 14px;">当前角色：{{roleCurrentName}}</p>
    </div>
    <div class="baseBorderShadow bgWhite baseBorderRadius">
      <div class="operate_container warp20">
        <div class="operate_item">
          <div class="operate_left">用户名</div>
          <div class="operate_right">
            <el-input v-model.trim="userName" placeholder="请输入内容" clearable style="width:185px">
            </el-input>
          </div>
        </div>
        <div class="operate_item">
          <div class="operate_left">账号</div>
          <div class="operate_right">
            <el-input v-model.trim="userCode" placeholder="请输入内容" clearable style="width: 185px">
            </el-input>
          </div>
        </div>
        <!-- 查询按钮 -->
        <div class="operate_item_btnGroup">
          <el-button type="warning" @click="searchFunc">搜索</el-button>
          <el-button type="primary" class="btnGray" @click="resetFunc">重置</el-button>
        </div>
      </div>
      <div class="handle_wrap">
        <el-button type="primary" @click="addUserDialog">添加用户</el-button>
      </div>
      <div style="padding:20px 20px 0">
        <table class="special_table" width="100%">
          <thead>
            <tr>
              <td style="width:100px">序号</td>
              <td>帐号</td>
              <td>用户名</td>
              <td>角色</td>
              <td style="width:250px">操作</td>
            </tr>
          </thead>
          <tbody>
            <template v-if="tableData.length">
              <tr v-for="(item, index) in tableData" :key="index">
                <td style="width:100px">{{pageSize * (currentPage - 1) + index + 1}}</td>
                <td>{{ item.userCode||'-' }}</td>
                <td>{{ item.userName||'-' }}</td>
                <td>
                  <div :title="item.roleName" class="one_line">{{item.roleName}}</div>
                </td>
                <td style="width:250px">
                  <el-button class="btnDelete" size="mini" round type="primary" @click="deleteRole(item.id)">删除</el-button>
                </td>
              </tr>
            </template>
            <template v-else>
              <tr>
                <td colspan="5">暂无数据</td>
              </tr>
            </template>
          </tbody>
        </table>
      </div>
      <div style="padding:20px 20px 0;text-align: center;">
        <el-pagination background :current-page="currentPage" :page-sizes="[10, 20, 30, 40,50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalPage" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>

      <!-- 新增角色 -->
      <el-dialog :visible.sync="dialogVisible" width="800px">
        <slot name="title">
          <p class="titleSlot">添加用户
            <span class="tipsSmall">（已是该角色的用户不显示）</span>
          </p>
        </slot>
        <!-- 筛选条件 -->
        <div class="warp20">
          <div class="operate_item">
            <div class="operate_left">用户名</div>
            <div class="operate_right">
              <el-input size="mini" v-model.trim="userName_dia" placeholder="请输入内容" clearable style="width:185px">
              </el-input>
            </div>
          </div>
          <div class="operate_item">
            <div class="operate_left">账号</div>
            <div class="operate_right">
              <el-input size="mini" v-model.trim="userCode_dia" placeholder="请输入内容" clearable style="width: 185px">
              </el-input>
            </div>
          </div>
          <!-- 查询按钮 -->
          <div class="operate_item_btnGroup">
            <el-button type="warning" size="mini" @click="searchFunc_dia">搜索</el-button>
            <el-button type="primary" size="mini" class="btnGray" @click="resetFunc_dia">重置</el-button>
          </div>
        </div>
        <!-- table -->
        <el-table ref="multipleTable" v-if="dialogVisible" :data="tableData_dia" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="100">
          </el-table-column>
          <el-table-column label="账号">
            <template slot-scope="scope">{{ scope.row.userCode }}</template>
          </el-table-column>
          <el-table-column prop="userName" label="用户名">
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div style="padding:25px;text-align: center;">
          <el-pagination background :current-page="currentPage_dia" :page-size="pageSize_dia" layout="total, prev, pager, next, jumper" :total="totalPage_dia" @current-change="handleCurrentChange_dia" />
        </div>
        <div style="padding-left:78px;text-align: right;">
          <el-button type="primary" @click="sureAddUser">确定</el-button>
          <el-button @click="dialogVisible=false">取消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  name: "yhgl",
  data() {
    return {
      userName: "",
      userCode: "",
      roleId: "",
      status: "",
      searchData: {
        userName: "", // 用户名
        userCode: "", // 账号
        roleId: "", // 角色id
        status: "" // 启用状态
      },
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      totalPage: 0,
      form: {
        userCode: "",
        userName: "",
        pass: ""
      },
      defaultProps: {
        children: "children",
        label: "name"
      },
      tree_data: [],
      dialogVisible_sq: false,
      checkedKeys: [],
      value_user: [],
      nowId: 0,
      dialogVisible_addUser: false,
      linkRoleId: 0,
      userName_dia: "",
      userCode_dia: "",
      dialogVisible: false,
      tableData_dia: [],
      totalPage_dia: 0,
      currentPage_dia: 1,
      pageSize_dia: 10,
      multipleSelection: [],
      roleCurrentName: {} //当前role
    };
  },
  watch: {},
  mounted() {
    if (this.$route.query && this.$route.query.roleId) {
      this.linkRoleId = this.$route.query.roleId;
      this.roleCurrentName = this.$route.query.roleName;
      // 从角色管理跳过来的，处理roleId
      this.roleId = Number(this.linkRoleId);
      this.searchData.roleId = this.roleId;
    }
    // 角色下用户列表
    this.roleList();
  },
  methods: {
    /**
     * @name roleList
     * @description 角色查询-搜索
     * @author wqy
     * @date 2019-09-05 17:08:55
     */
    async roleList() {
      let data = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        ...this.searchData
      };
      const res = await this.$store.dispatch("qxgl-yhgl/findList", data);
      res.data.list.map(item => {
        item.status == 1
          ? (item.switchValue = true)
          : (item.switchValue = false);
      });
      let list = res.data.list || [];
      list.map(item => {
        item.roleName = item.roleList.map(vo => vo.roleName).join(",");
      });
      this.tableData = res.data.list || [];
      this.totalPage = res.data.total;
    },
    /**
     * @name  handleCurrentChange handleSizeChange
     * @description 分页
     * @author wqy
     * @date 2019-09-16 15:45:04
     */
    handleCurrentChange(val) {
      this.currentPage = val;
      this.roleList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.roleList();
    },
    /**
     * @name searchFunc
     * @description 查询
     * @author cjs1992
     * @date 2019-12-12 11:31:20
     */
    searchFunc() {
      this.searchData = {
        userName: this.userName,
        userCode: this.userCode,
        roleId: this.roleId,
        status: this.status
      };
      this.handleCurrentChange(1);
    },
    /**
     * @name resetFunc
     * @description 重置
     * @author cjs1992
     * @date 2019-12-12 11:32:22
     */
    resetFunc() {
      this.userName = "";
      this.userCode = "";
      this.status = "";
      this.currentPage = 1;
      this.pageSize = 10;
      this.searchFunc();
    },
    /**
     * @name deleteRole
     * @description 删除该角色下用户
     * @author wqy
     * @date 2019-09-16 15:55:12
     */
    async deleteRole(id) {
      try {
        await this.confirmFunc({
          msg: "您确定要删除用户吗?"
        });
        const res = await this.$store.dispatch("qxgl-yhgl/deleteUserRole", {
          roleId: this.roleId,
          userId: id
        });
        if (res.status == 1000) {
          this.$message({
            message: "删除成功!",
            type: "success"
          });
          this.handleCurrentChange(1);
        }
      } catch (err) {}
    },
    /**
     * @name tableList
     * @description 获取不是改角色下的用户列表
     * @author wqy
     * @date 2021-01-19 14:35:30
     */
    async tableList() {
      const res = await this.$store.dispatch("qxgl-yhgl/getUsersByRoleId", {
        roleId: this.roleId,
        startPage: this.currentPage_dia,
        pageSize: this.pageSize_dia,
        userName: this.userName_dia,
        userCode: this.userCode_dia
      });
      this.tableData_dia = res.data.list || [];
      this.totalPage_dia = res.data.total;
    },
    /**
     * @name handleCurrentChange_dia
     * @description 分页
     * @author wqy
     * @date 2021-01-20 14:12:07
     */
    handleCurrentChange_dia(val) {
      this.currentPage_dia = val;
      this.tableList();
    },
    /**
     * @name searchFunc
     * @description 查询
     * @author wqy
     * @date 2021-01-19 14:52:52
     */
    searchFunc_dia() {
      this.handleCurrentChange_dia(1);
    },
    /**
     * @name resetFunc_dia
     * @description 重置添加筛选
     * @author wqy
     * @date 2021-01-20 14:33:19
     */
    resetFunc_dia() {
      this.userName_dia = "";
      this.userCode_dia = "";
      this.currentPage_dia = 1;
      this.handleCurrentChange_dia(1);
    },
    /**
     * @name handleSelectionChange
     * @description 多选
     * @author wqy
     * @date 2021-01-20 11:35:09
     */
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    /**
     * @name addUserDialog
     * @description 为角色添加用户
     * @author wqy
     * @date 2021-01-20 14:18:39
     */
    addUserDialog() {
      this.resetFunc_dia();
      this.dialogVisible = true;
    },
    /**
     * @name sureAddUser
     * @description 角色添加用户
     * @author wqy
     * @date 2021-01-20 11:20:20
     */
    async sureAddUser() {
      let _ids = this.multipleSelection.map(item => item.id);
      if (!_ids.length) {
        this.$message({
          type: "warning",
          message: "请选择您要添加的用户"
        });
        return;
      }
      const res = await this.$store.dispatch("qxgl-yhgl/addUserRoleBatch", {
        roleId: this.roleId,
        userList: _ids
      });
      this.dialogVisible = false;
      this.resetFunc();
    },
    /**
     * @name goBack
     * @description 返回上一步
     * @author wqy
     * @date 2021-01-20 15:47:36
     */
    goBack() {
      this.$router.replace({
        path: `/jsgl`,
        query: {
          flag: 1
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/views/jcsz/common-switch.scss";
// .el-switch{
//   width: 135px;
// }
.operate_container {
  padding: 22px;
  box-shadow: 0 5px 39px 0 rgba(0, 0, 0, 0.1);
}
.operate_item {
  display: inline-table;
  margin-right: 20px;
  margin-bottom: 12px;
}
.operate_left {
  display: table-cell;
  padding-right: 12px;
  width: 88px;
  color: #344563;
  text-align: right;
  font-size: 14px;
  box-sizing: border-box;
}
.operate_right {
  display: table-cell;
}
.operate_item_btnGroup {
  display: inline-block;
  width: 272px;
  text-align: right;
}
.operate_item_btnGroup .el-button {
  width: 106px;
}
h5,
p,
ul,
img {
  padding: 0;
  margin: 0;
  border: 0;
}
.clearfix {
  *zoom: 1;
}

.clearfix:after {
  display: block;
  clear: both;
  content: " ";
  height: 0;
  visibility: hidden;
}

li {
  list-style-type: none;
}
.qxgl {
  padding: 15px;
}
.zsHistory .iconfont {
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
}
.blue {
  color: #6bc5ff;
  cursor: pointer;
}
.greey {
  color: #aaafb3;
}
.greey:hover {
  color: #eb9616;
}
.addBtn {
  display: inline-block;
  margin-right: 20px;
  color: #409eff;
  background: #ecf5ff;
  border: 1px solid;
  border-color: #b3d8ff;
  padding: 6px 15px;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
}
.addBtn:hover {
  background: #409eff;
  border-color: #409eff;
  color: #fff;
}
.treeBox {
  height: 350px;
  overflow-y: scroll;
}
.userName {
  padding-right: 10px;
  display: inline-block;
}
.titleName {
  line-height: 36px;
  padding-right: 15px;
}
.padding20 {
  padding-top: 20px;
}
.titleSlot {
  font-size: 18px;
  .tipsSmall {
    font-size: 12px;
  }
}
.warp20 {
  padding: 15px 0;
  .operate_left {
    width: 54px !important;
  }
  .operate_item_btnGroup {
    width: 200px;
    .el-button {
      width: 90px;
    }
  }
}
</style>
